import React, { Component } from 'react'
import { connect } from 'react-redux'
import action from './store/actionCreator'
class App extends Component {
  componentDidMount () {
    console.log(this.props)
    this.props.getProListData()
    // this.props.getBannerListData()
    // 如果需要传递参数时 ---- 假设传递参数为 a，值为100
    this.props.getBannerListData({ a: 100 })
  }
  render() {
    const { proList, bannerList } = this.props
    return (
      <div>
        {
          bannerList && bannerList.map((item, index) => (
            <img src={item.img} key={index} alt={item.alt}/>
          ))
        }
        {
          proList && proList.map((item, index) => {
            return (
              <p key = { index }> { item.proname } </p>
            )
          })
        }
      </div>
    )
  }
}
const mapStateToProps = (state) => {
  return {
    proList: state.proList,
    bannerList: state.bannerList
  }
}

const mapDispatchToProps = (dispatch) => { 
  return {
    getProListData () {
      fetch('http://121.89.205.189/api/pro/list')
        .then(res => res.json())
        .then(res => {
          console.log(res)
          dispatch({
            type: 'UPDATE_PRO_LIST',
            payload: res.data
          })
        })
    },
    // getBannerListData () {
    //   // 触发异步操作
    //   // dispatch 是为了触发actionCreator
    //   dispatch(action.getBannerListDataAction)
    // }
    getBannerListData (params) {
      dispatch(action.getBannerListDataAction(params))
    }
  }

}

export default connect(mapStateToProps, mapDispatchToProps)(App)
